<template>
  <div>
    <a-page-header
      style="border: 0px solid rgb(235, 237, 240);height: 56px;background-color: #ffff;box-shadow: rgba(60, 60, 60, 0.07) 0px 0px 3px;"
      :breadcrumb="{ props: { routes } }"
    >
      <!-- eslint-disable-next-line -->
      <template slot="itemRender" slot-scope="{route, params, routes, paths}">
      <span v-if="routes.indexOf(route) === routes.length - 1">
        {{route.breadcrumbName}}
      </span>
      <router-link v-else :to="paths.join('/')">
        {{route.breadcrumbName}}
      </router-link>
    </template>
    </a-page-header>
  </div>
</template>

<script>
const defaultRoutes = [
  {
    path: '/dashboard',
    breadcrumbName: '工作台'
  },
  {
    path: '/demo',
    breadcrumbName: '基础DEMO'
  },
  {
    path: '/demo/table',
    breadcrumbName: '表格'
  }
]

export default {
  name: 'PageHeader',
  props: {
    routes: { type: Array, default: () => defaultRoutes }
  }
}
</script>

<style scoped lang='stylus'></style>
